import React, { useState, useEffect, useRef } from 'react'
// import { Button } from 'antd';
import Menu from '../components/Menu';
import Modal from '../components/Modal';
import Swiper from "../components/Swiper"
import Tan from "../components/Tan"
import Calender from "../components/Calendar"
import { Input, Select, Carousel } from 'antd';
import { LeftOutlined, RightOutlined,LeftCircleOutlined,RightCircleOutlined } from '@ant-design/icons';
import { Affix } from 'antd';
import Tab from "../components/Tab/Tab"
const data = [
  "邀请函",
  "游戏",
  "抽奖",
  "端午节",
  "招聘",
  "百度宴邀请函",
  "婚礼邀请函"
]



function Home() {

  //视频
  const [rightShow, setRightShow] = useState(true);
  const [leftShow, setLeftShow] = useState(false);
  const onScroll = () => {
    const a: any = document.querySelector(".main_right_scroll");
    if (a.scrollLeft <= 0) {
      setLeftShow(false);
      setRightShow(true);
    } else if (a.scrollLeft === a.scrollWidth - a.clientWidth) {
      setRightShow(false);
    } else {
      setLeftShow(true);  
      setRightShow(true);
    }
  };
  useEffect(() => {
    (async () => {
      document
        .querySelector(".main_right_scroll")
        ?.addEventListener("scroll", onScroll);
      document
        .querySelector(".main_right_scroll")
        ?.addEventListener("wheel", onScroll);
      // const videoTime: any = document.querySelector("video");
      // videoTime.addEventListener("timeupdate", () => {
      //   console.log(videoTime.duration); //获取视频时长
      //   console.log(videoTime.currentTime); //获取视频当前播放时间
      // });
    })();
  }, []);
  const Right = () => {
    const a: any = document.querySelector(".main_right_scroll");
    a.scrollLeft = a.scrollWidth - a.clientWidth;
    setLeftShow(true);
  };
  const Left = () => {
    const a: any = document.querySelector(".main_right_scroll");
    a.scrollLeft = 0;
  };

  const { Option } = Select;
  const { Search } = Input;
  const selectBefore = (
    <Select defaultValue="全部">
      <Option value="http://">H5</Option>
      <Option value="https://">海报</Option>
      <Option value="https://">长页</Option>
      <Option value="https://">表单</Option>
      <Option value="https://">互动</Option>
      <Option value="https://">电子画册</Option>
    </Select>
  );

  const [isMouseInside, setIsMouseInside] = useState(false);
  const [activeIndex, setActiveIndex] = useState(0);

  const handleMouseEnter = () => {
    setIsMouseInside(true);
  };

  const handleMouseLeave = () => {
    setIsMouseInside(false);
    setActiveIndex(0); // 鼠标离开时将activeIndex重置为0
  };

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!isMouseInside) return; // 只有在鼠标进入时才监听鼠标移动事件

    const divRect = e.currentTarget.getBoundingClientRect(); // 获取当前元素相对于视口的位置信息
    const mouseXPosition = e.clientX - divRect.left; // 计算相对于当前元素的鼠标X坐标
    const imageWidth = divRect.width / 4; // 总共4个图片
    const newIndex = Math.floor(mouseXPosition / imageWidth);

    if (newIndex !== activeIndex && newIndex >= 0 && newIndex <= 3) {
      setActiveIndex(newIndex);
    }
  };

  //左右箭头切换
  const [leftest, setLedtest] = useState(0);
  const boxWidth = 700;
  const maxScroll = -boxWidth;//最大滚动值为负盒子宽度


  const zuo1 = () => {
    setLedtest((prevLeftset) => {
      const newLeftset = prevLeftset + 300;
      return newLeftset > 0 ? 0 : newLeftset
    });
   
  }
 
  const you1 = () => {
    setLedtest((prevLeftset) => {
      const newLeftset = prevLeftset - 300;
      return newLeftset < maxScroll ? maxScroll : newLeftset
    });
  }
 
//tab切换
  type Tab = 'tab1' | 'tab2' | 'tab3';
  const [activeTab, setActiveTab] = useState<Tab>('tab1');

  const handleTabClick = (tab: Tab) => {
    setActiveTab(tab);
  };


  //搜索框上移
  const seachref = useRef<HTMLDivElement>(null)
  window.addEventListener('scroll', function () {
    const s = document.documentElement.scrollTop || document.body.scrollTop
    console.log("滚动距离", s)
    if (!seachref.current) return
    if (s > 100) {
      seachref.current.style.position = 'fixed'
      seachref.current.style.top = '0px'
      seachref.current.style.right = '100px'
      seachref.current.style.width="500px"
    } else {
      seachref.current.style.position = 'relative'
      seachref.current.style.top = '0px'
      seachref.current.style.right = '0px'
    }
  })
   const [top, setTop] = React.useState<number>(0);
    const [left,setLeft] = React.useState<number>(51)
  return (
    <div>
      <Affix offsetTop={top}>
      <div className='head_page'>
        <img src="//lib.eqh5.com/eqx.layout/images/new_logo.svg" alt="" />
        <ul className='head_ul'>
          <li><b>免费模版</b>
            {/* <div className='ul1_page'>
             <li>1111</li>
            </div> */}
            <Tan></Tan>
          </li>
          <li>开通会员
            <ul className='ul2_page'>
              <li></li>
            </ul>
          </li>
          <li>产品服务
            <ul className='ul3_page'>
              <li></li>
            </ul>
          </li>
          <li>解决方案
            <ul className='ul4_page'>
              <li></li>
            </ul>
          </li>
          <li>内容中台
            <ul className='ul5_page'>
              <li></li>
            </ul>
          </li>
          <li>资源与合作
            <ul className='ul6_page'>
              <li></li>
            </ul>
          </li>
          <img className='img2' src="//lib.eqh5.com/eqx.layout/images/tiphot.svg" alt="" />
          <img src="//lib.eqh5.com/eqx.layout/images/vip_corner_2.png" alt="" />
        </ul>
        {/* <Button type="primary">登录/注册</Button> */}
        <Modal></Modal>
            {
              localStorage.getItem("token") ?  <img src="src/img/zhuce.png" alt="" className="tiao_img" style={{display:"none"}}/>:
              ( <img src="src/img/zhuce.png" alt="" className="tiao_img" />) 
            }
       

      </div>
      </Affix>
      <div className='box' >
        <Affix offsetTop={left}>
        <div className='left_page'>
          <Menu></Menu>
        </div>
        </Affix>
        <div className='body_page'>
          <div className="top_page">
            <div className="zuo_page">
              <img src="src/img/quan.png" alt="" />
            </div>
            <div className="zhong_page" >
              <div className="inputl_page" ref={seachref}>
                <Search addonBefore={selectBefore} enterButton className='search_page' />

                <Carousel infinite={true} autoplay dotPosition="left" dots={false}>
                  {
                    data && data.map((item, index) => {
                      return <p key={index}>{item}</p>
                    })
                  }
                </Carousel>
              </div>
              <ul>
                <li>邀请函</li>
                <li>游戏</li>
                <li>出场视频</li>
                <li>百度宴邀请函</li>
                <li>抽奖</li>
                <li>婚礼邀请函</li>
                <li>招聘</li>
              </ul>
            </div>
            <div className="you_page">
              <div className="zuo6_page">
                <h2>24/5 2024</h2>
                <p style={{ color: "#ccc" }}>周五 农历四月十七</p>
              </div>
              <div className="you6_page">
                <img src="/src/img/smock.png" alt="" style={{ width: "30px", height: "30px", marginTop: "20px" }} />
                <p style={{ marginTop: "25px", marginLeft: "10px", fontWeight: "bold" }}>世界无烟日</p>

              </div>
              <div className="rili_page">
                <Calender></Calender>
              </div>
            </div>

          </div>
          <div className="swiper_page">
            <Swiper></Swiper>
          </div>
          <div className="center_page">
            <img src="src/img/duan.png" alt="" />
            <img src="src/img/wu.png" alt="" />
            <img src="src/img/pin.png" alt="" />
            <img src="src/img/jing.png" alt="" />
            <img src="src/img/ge.png" alt="" />
            <img src="src/img/jie.png" alt="" />
            <img src="src/img/yu.png" alt="" />
            <img src="src/img/you.png" alt="" />
          </div>
          <div className="day_page">
            <div className='today_page'>
              <h2>今日推荐</h2>
              <span>开通会员免费用</span>
            </div>
            <ul>
              <li className={activeTab === 'tab1' ? 'active' : ''}
                onClick={() => handleTabClick('tab1')}>精选推荐</li>
              <li className={activeTab === 'tab2' ? 'active' : ''}
                onClick={() => handleTabClick('tab2')}>热点关注</li>
              <li className={activeTab === 'tab3' ? 'active' : ''}
                onClick={() => handleTabClick('tab3')}>儿童节</li>
              <li>高考加油</li>
              <li>端午节</li>
              <li>618</li>
            </ul>
            <p className='cha_page'>查看更多<RightOutlined /></p>
          </div>
            <div className="dong_page">
              <div className="bai_page">
                <div className="top0_page">
                  <div className="cen_page3">
                    <h2>+</h2>
                    <p>空白创建</p>
                  </div>
                </div>
                <div className="xia_page2">
                  <img src="/src/img/ying.png" alt="" />
                </div>
              </div>
              {activeTab === 'tab1' &&
                <div className="right6_page">
                  <div className="youu_page" style={{ marginLeft: leftest, transition: "margin-left 0.3s ease" }}>
                    <div className="tu1_page">
                      <div
                        className="lione"
                        onMouseEnter={handleMouseEnter}
                        onMouseLeave={handleMouseLeave}
                        onMouseMove={handleMouseMove}
                      >
                        <img src="src/img/dong.png" alt="" style={{ display: activeIndex === 0 ? 'block' : 'none' }} />
                        <img src="src/img/bei2.png" alt="" style={{ display: activeIndex === 1 ? 'block' : 'none' }} />
                        <img src="src/img/bei5.png" alt="" style={{ display: activeIndex === 2 ? 'block' : 'none' }} />
                        <img src="src/img/bei4.png" alt="" style={{ display: activeIndex === 3 ? 'block' : 'none' }} />
                      </div>
                    </div>
                    <div className="tu1_page">
                      <div className="top8_page">
                        <img style={{ width: "100%", height: "1000px" }} src="/src/img/ppp.png" alt="" />
                      </div>

                    </div>
                    <div className="tu1_page" style={{ background: "#000" }} onMouseOver={() => document.querySelector("video")?.play()}
                      onMouseOut={() => document.querySelector("video")?.pause()}>
                      <video style={{ width: "100%", height: "100%" }} src="/src/img/zong.mp4"></video>
                    </div>
                    <div className="tu1_page">
                      <img src="/src/img/zong.png" alt="" />
                    </div>
                    <div className="tu1_page">
                      <img src="/src/img/zong2.png" alt="" />
                    </div>
                    <div className="tu1_page">
                      <img src="/src/img/zong3.png" alt="" />
                    </div>
                    <div className="tu1_page">
                      <img src="/src/img/zong4.png" alt="" />
                    </div>
                    <span className='zuo_left' onClick={zuo1}><LeftOutlined /></span>
                  <span className='you_right' onClick={you1}><RightOutlined /></span> 
                  </div>
                  
                </div>
              }
              {activeTab === 'tab2' &&
                <div className='tab2_page'>
                  <div className="tu11_page">
                    <img src="/src/img/hhh.png" alt="" />
                  </div>
                  <div className="tu11_page">
                    <img src="/src/img/mmm.png" alt="" />
                  </div>
                  <div className="tu11_page">
                    <img src="/src/img/1.webp" alt="" />
                  </div>
                  <div className="tu11_page">
                    <img src="/src/img/3.webp" alt="" />
                  </div>
                </div>
              }
              {activeTab === 'tab3' &&
                <div className='tab2_page'>
                  <div className="tu11_page">
                    <img src="/src/img/meng.png" alt="" />
                  </div>
                  <div className="tu11_page">
                    <img src="/src/img/zi.jpg" alt="" />
                  </div>
                  <div className="tu11_page">
                    <img src="/src/img/baby.png" alt="" />
                  </div>
                  <div className="tu11_page">
                    <img src="/src/img/yi.jpeg" alt="" />
                  </div>
                </div>
              }
            </div>



        

          <div className="tu_page">
            <img src="/src/img/hui.png" alt="" />
          </div>


          <div className="day_page">
            <div className='today_page'>
              <h2>今日推荐</h2>
              <span>开通会员免费用</span>
            </div>
            <ul>
              <li>精选推荐</li>
              <li>热点关注</li>
              <li>儿童节</li>
              <li>高考加油</li>
              <li>端午节</li>
              <li>618</li>
            </ul>
            <p className='cha_page'>查看更多<RightOutlined /></p>
          </div>
          <div className="tab12_page">
              <img src="/src/img/kkk.png" alt="" />
            <img src="/src/img/zzz.png" alt="" />
            <img src="/src/img/xxx.png" alt="" />
            <img src="/src/img/aaa.png" alt="" />
            <img src="/src/img/qqq.png" alt="" />
            <img src="/src/img/ggg.png" alt="" />
            <img src="/src/img/nnn.png" alt="" />
          
          </div>
          <div className="day_page">
            <div className='today_page'>
              <h2>今日推荐</h2>
              <span>开通会员免费用</span>
            </div>
            <ul>
              <li>精选推荐</li>
              <li>热点关注</li>
              <li>儿童节</li>
              <li>高考加油</li>
              <li>端午节</li>
              <li>618</li>
            </ul>
            <p className='cha_page'>查看更多<RightOutlined /></p>
          </div>
          <div className="tab12_page">
            <img src="/src/img/999.png" alt="" />
            <img src="/src/img/888.png" alt="" />
            <img src="/src/img/666.png" alt="" />
            <img src="/src/img/555.png" alt="" />
            <img src="/src/img/444.png" alt="" />
            <img src="/src/img/222.png" alt="" />
          </div>
              <div className='footer_page'>
                <div className="left11_page">
                  <div className="logo_page">
                    <img src="/src/img/logo.svg" alt="" />
                    <p>全球1000强,全国100强网站</p>
                  </div>
                  <div className="main_page">
                    <div className="yi_page">

                    </div>
                    <div className="yi_page">
                      
                    </div>
                    <div className="text_li">

                    </div>
                  </div>
                </div>
                <div className="center11_page"></div>
                <div className="right11_page"></div>
              </div>
        </div>
      </div>
    </div>
  )
}
export default Home
